const {
  resolve
} = require('path');
//打包HTML资源需要使用html-webpack-plugin
const HtmlWebpackPugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js', //指定入口文件
  output: {
    filename: 'main.js', //指定出口文件的文件名
    path: resolve(__dirname, 'build'), //指定绝对路径
    publicPath: "build/" //配置大于8k以上的图片的路径
  },
  module: {
    rules: [{
        //使用less资源引用less-loader
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        //处理图片资源需要使用url-loader,需要下载url-loader file-loader l两个文件
        //但是处理不了img图片引用的资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          //图片限制大小，图片资源小于8K的会被base64处理，可以减轻服务器的压力
          limit: 8 * 1024,
          //关闭es6的url-loader的模块化，使用commonjs的解析
          esModule: false,
          //进行图片的重命名，hash值取图片的前10位，.ext是文件的原扩展名
          name: '[hash:10].[ext]'
        }
      },
      {
        //处理img图片资源（引入img资源，使用url-loader进行处理）
        test: /\.html$/,
        loader: 'html-loader'
      },
      /*  {
         //打包除了css/html/js资源
         exclude: /\.(css|html|js)$/,
         loader: 'file-loader'
       } */
    ]
  },
  plugins: [

    new HtmlWebpackPugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}